<template>
	<view class="activity_list">
		<view class="activity_list_header">
			<u-search placeholder="请输入标签/活动名称查询" v-model="keyword" :clearabled="true" :show-action="false" height="30"
				@change="handleSearchChange" @clear="handleSearchChange"></u-search>
			<!-- <view class="activity_list_header_search" @click="handleType()">
				<view class="activity_list_header_search_item">
					<text>类型</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view class="activity_list_header_search_item">
					<text>年龄</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view class="activity_list_header_search_item">
					<text>状态</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<view class="activity_list_header_search_item">
					<text>活动周期</text>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<u-overlay :show="typeShow">
				<view class="activity_list_header_type">
					<view class="activity_list_header_type_item" v-for="item in activityTypeNameList" :key="item"
						@click="handleItemClick(item,'activityTypeName')">
						<text>{{item}}</text>
						<u-icon name="checkbox-mark" color="#FF943C" size="28"
							v-if="activityParams?.activityTypeName === item"></u-icon>
					</view>
				</view>
			</u-overlay> -->
		</view>
		<scroll-view :scroll-top="activityScrollTop" scroll-y="true" refresher-enabled="true"
			:refresher-triggered="activityTriggered" @refresherrefresh="activityOnRefresh" :refresher-threshold="50"
			@scrolltolower="activityScrolltolower" class="activity_list_scroll safe_area" v-if="activityList.length">
			<activityCards v-for="item in activityList" :key="item?.id" :item="item" :status="true"
				@handleEmit="handleEmit">
			</activityCards>
			<u-loadmore :status="activityStatus" @loadmore="activityScrolltolower"
				v-if="activityStatus !== 'nomore'"></u-loadmore>
			<view style="height: 1rpx;"></view>
		</scroll-view>
		<u-empty v-else marginTop="100" text="暂无相关活动"
			icon="http://qianxueapplet.suoeryun.com/hd.png"></u-empty>
	</view>
	<!-- 评论 -->
	<comment ref="commentRef" @close="handleCommentClose"></comment>
	<!-- 分享 -->
	<customShare ref="shareRef"></customShare>
</template>

<script lang="ts" setup>
	import { onLoad } from "@dcloudio/uni-app";
	import { ref, reactive, unref } from "vue";
	import { qxActivityManageList } from "@/config/index.api";
	import activityCards from '@/components/activityCards.vue';
	import comment from "@/components/comment.vue";
	import customShare from "@/components/customShare.vue";

	const keyword = ref();
	const activityList = ref([]);
	const activityPagination = reactive({ pageNo: 1, total: 0, pageSize: 10 });
	const activityStatus = ref('loadmore');
	const activityParams = ref({});
	const activityScrollTop = ref(0);
	const activityTriggered = ref(false);
	const commentRef = ref();
	const shareRef = ref();
	const clickIndex = ref(0);

	const activityTypeNameList = ['亲子专属', '小学专属', '初中专属', '高中专属'];

	// 查询
	const typeShow = ref(true)

	onLoad(async (params) => {
		uni.setNavigationBarTitle({
			title: params?.title
		})
		if (params?.title !== '研习活动')
			activityParams.value.activityTypeName = params?.title;
		loadData();
	})

	/**
	 * 查询数据
	 */
	async function loadData() {
		if (activityPagination.pageNo === 1) {
			activityList.value = [];
		}
		activityStatus.value = 'loading';
		const res = await qxActivityManageList({ ...unref(activityParams), ...activityPagination });
		activityTriggered.value = false;
		activityPagination.total = res?.total;
		activityList.value?.push(...res?.records);
		if (unref(activityList)?.length < activityPagination.total) {
			activityStatus.value = 'loadmore';
		} else {
			activityStatus.value = 'nomore';
		}
	}

	/**
	 * 根据条件查询
	 * @param {Object} value
	 */
	function handleSearchChange(value) {
		console.log(value, 'value');
		activityPagination.pageNo = 1
		activityParams.value.search = value ?? '';
		uni.$u.throttle(loadData, 1000, false);
	}

	/**
	 * 最新活动-滚动到底部操作
	 */
	function activityScrolltolower() {
		if (unref(activityList)?.length < activityPagination.total && (unref(activityList)?.length / activityPagination.pageSize == activityPagination.pageNo)) {
			activityPagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发-最新活动
	 */
	function activityOnRefresh() {
		activityTriggered.value = true;
		activityPagination.pageNo = 1;
		loadData();
	}

	/**
	 * 点赞/评论/转发 回调-最新活动
	 */
	function handleEmit(item, key) {
		const index = unref(activityList)?.findIndex(value => value?.id == item?.id),
			obj = unref(activityList)[index];
		if (key === 'comment') {//type 1 活动 2图集 3视频
			commentRef.value.handleShow({ activityId: item?.id, num: item?.comment ?? 0, belongId: item?.id, type: '1' });
		} else if (key === 'likes') {
			activityList.value[index]['izLike'] = item?.izLike;
			activityList.value[index]['likes'] = item?.likes;
		} else if (key === 'relay') {
			shareRef.value.handleShow({ path: 'pages/index/acitvityDetails', scene: `id=${item?.id}`, activityId: item?.id, title: item?.activityName });
		} else {
			activityList.value[index] = item;
		}
	}

	/**
	 * 类型操作
	 */
	function handleType() {
		typeShow.value = true;
	}

	/**
	 * 查询点击
	 */
	function handleItemClick(item, type) {
		console.log(activityParams.value, '134');
		if (type === 'activityTypeName') {//类型
			if (activityParams.value[type] && activityParams.value[type] === item) {
				activityParams.value[type] = '';
				return
			}
			activityParams.value[type] = item;
		}
		typeShow.value = false;
		loadData();
	}

	/**
	 * 评论回调
	 */
	function handleCommentClose(num) {
		activityList.value[unref(clickIndex)]['comment'] = num;
	}
</script>

<style lang="scss" scoped>
	.activity_list {
		.activity_list_header {
			background-color: #ffffff;
			padding: 20rpx 24rpx;
			position: relative;

			.activity_list_header_search {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 30rpx;
				background-color: #ffffff;

				.activity_list_header_search_item {
					display: flex;
					align-items: center;

					::v-deep .u-icon {
						margin-left: 10rpx;
					}
				}
			}

			.activity_list_header_type {
				position: absolute;
				width: 100vw;
				z-index: 10071;
				background-color: #ffffff;
				border-top: 2rpx solid #E7E7E7;

				.activity_list_header_type_item {
					height: 110rpx;
					line-height: 110rpx;
					border-bottom: 2rpx solid #E7E7E7;
					margin: 0 32rpx;
					display: flex;
					justify-content: space-between;
					font-size: 32rpx;
					font-weight: 500;
				}
			}

			::v-deep .u-transition {
				top: 192rpx !important;
			}
		}

		.activity_list_scroll {
			height: calc(100vh - 30px);
		}
	}
</style>